import useUserStore from '@/store/user';
import useMenuStore from '@/store/menu';
import { Button, Col, Form, Input, message, Row } from 'antd';
import { FC } from 'react';
import { useNavigate } from 'react-router-dom';
import { getMenuList, loginSubmit } from '@/api/login';
// interface CaptchaResponse {
//   captcha: {
//     text: string;
//     data: string; // 假设这是图片 base64 或 URL
//   };
// }
// 定义一个名为Login的函数组件
const Login: FC = () => {
  // 使用Form组件的useForm方法创建一个表单实例
  const { updateToken, updateUserInfo } = useUserStore();
  const { setMenuList } = useMenuStore();
  const [imgUrl] = useState<string | undefined>();
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // useEffect(() => {
  //   getCapt();
  // }, []);

  // const getCapt = async () => {
  //   const result = await getCaptcha();
  //   console.log(result.data, 'data');
  //   const { captcha } = result.data as CaptchaResponse;
  //   if (captcha && captcha.data) {
  //     const blob = new Blob([captcha.data], {
  //       type: 'image/svg+xml;charset=utf-8',
  //     });
  //     const url = URL.createObjectURL(blob);
  //     setImgUrl(url);
  //   } else {
  //     console.error('Invalid captcha data received:', captcha);
  //   }
  // };
  const getMenu = async () => {
    const result = await getMenuList();
    if (!result) return;
    console.log(result, 'result---------获取菜单');

    setMenuList(result?.data?.list || []);
  };
  // 定义表单提交的回调函数
  const onFinish = async (values: {
    accessor: string;
    password: string;
    captcha: string;
    remember: boolean;
  }) => {
    const result = await loginSubmit(values);
    if (!result) return;
    console.log(result.data, 'result--------登录陈工');
    const { token, user } = result.data;
    console.log(token, 'token--------token');
    console.log(user, 'user--------user');
    updateUserInfo(user);
    getMenu();
    if (!token) {
      message.error('登录失败');
      return;
    }
    console.log(token, 'token--------token');
    updateToken(token);
    navigate('/Home');
  };
  return (
    <div className="w-full h-full bg-#a4e4d4 flex-center ">
      <Form
        initialValues={{
          username: 'admin',
          password: '123456',
          captcha: '1234',
          remember: true,
        }}
        layout="vertical"
        form={form}
        className="w-1/3 h-1/2 bg-white rounded p-4 hover:transform hover:scale-105 transition-all duration-300"
        onFinish={onFinish}
      >
        <h1 className="text-2xl font-bold mb-4">Login</h1>
        <Form.Item
          className="w-100%"
          name="accessor"
          label="账号"
          rules={[{ required: true, message: '请输入账号' }]}
        >
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          className="w-100%"
          name="password"
          label="密码"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
        <Form.Item
          className="w-100%"
          name="captcha"
          label="验证码"
          rules={[{ required: true, message: '请输入验证码' }]}
        >
          <Input
            addonAfter={<img src={imgUrl} alt="captcha" />}
            placeholder="请输入验证码"
          />
        </Form.Item>
        <Form.Item>
          <Row gutter={10}>
            <Col span={12}>
              <Button className="w-full" type="primary" htmlType="submit">
                Submit
              </Button>
            </Col>
            <Col span={12}>
              <Button className="w-full" type="primary" htmlType="reset">
                Reset
              </Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;
